<template>
  <div class="waterfall-container">
    <section class="w-h">
      <span class="show-text">修改显示的行数：</span>
      <el-button class="show-num" type="primary" size="mini" @click="changShowNum(5)">5</el-button>
      <el-button class="show-num" type="primary" size="mini" @click="changShowNum(6)">6</el-button>
      <el-button class="show-num" type="primary" size="mini" @click="changShowNum(8)">8</el-button>
      <el-button class="show-num refresh" type="primary" size="mini" @click="handleRefresh">刷新</el-button>
    </section>
    <div class="waterfall" @scroll="loadmore">
      <div class="waterfall-card" v-for="item in number" :key="item">
        <div class="img-box">
          <img height="100%" width="100%" src="https://acg.xydwz.cn/api/api.php" />
        </div>
        <div class="img-info">
          <i class="el-icon-share share" @click="share">Share</i>
          <i class="unlike el-icon-star-on" @click="handelLike"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 30,
      num: 6,
      loadNum: 10,
      f: true,
      init: true
    }
  },
  methods: {
    createWaterfall(changeNum, nodeObj) {
      const that = this
      const body = document.body
      const waterfall = body.querySelector('.waterfall')
      let waterList = body.querySelectorAll('.waterfall-card')
      const imgbox = body.querySelectorAll('.img-box')
      const waterfallWidth = waterfall.clientWidth
      let waterInfoArr = []
      if(nodeObj !== undefined) {
        waterInfoArr = nodeObj.top
        waterList = nodeObj.node
      }
      let max = 200
      let min = 0
      console.log(changeNum, typeof nodeObj)
      waterList.forEach((item, index) => {
        item.style.position = ''
        item.style.left = ''
        item.style.top = ''
        item.style.marginRight = '3px'
        if(!changeNum || typeof nodeObj !== 'undefined' || this.init) {
          imgbox[index].style.height = Math.floor(Math.random() * 150 + 50) + 'px'
          item.style.backgroundColor = `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
        }else {
          this.num = changeNum
        }
        if(index > this.num - 1 || nodeObj !== undefined) {
          item.style.position = 'absolute'
          item.style.top = waterInfoArr[index % this.num].top + 'px'
          item.style.left = waterInfoArr[index % this.num].left + 'px'
        }
        item.style.width = waterfallWidth / this.num - 5 + 'px'
        let obj = {
          top: item.offsetTop + item.offsetHeight + 5,
          left: item.offsetLeft
        }
        waterInfoArr[index % this.num] = obj
        obj = null
        if(waterInfoArr[index % this.num].top > max) {
          max = waterInfoArr[index % this.num].top
        }
        if(index === waterList.length - 1) {
          const a = []
          waterInfoArr.forEach(item => {
            a.push(item.top)
          })
          min = a.reduce((c, v) => {
            if(c < v) {
              return c
            }else {
              c = v
              return c
            }
          })
          sessionStorage.defaultLoad = min
          sessionStorage.endWaterInfoArr = JSON.stringify(waterInfoArr)
        }
        waterfall.style.height = max + 'px'
      })
      let f = true
      window.onresize = function() {
        if(f) {
          f = false
          setTimeout(function() {
            that.updateWindowSize()
            that.createWaterfall(that.num)
            f = true
          }, 150)
        }
      }
      this.init = false
    },
    handelLike($event) {
      const isLike = $event.path[0].classList[0]
      if(isLike === 'like') {
        $event.path[0].classList = 'unlike' + ' ' + 'el-icon-star-on'
      }else if(isLike === 'unlike') {
        $event.path[0].classList = 'like' + ' ' + 'el-icon-star-on'
      }
    },
    share() {
      this.$message({ type: 'success', message: '分享成功', duration: 2000 })
    },
    changShowNum(num) {
      this.createWaterfall(num)
    },
    handleRefresh() {
      this.init = true
      this.createWaterfall(this.num)
    },
    loadmore($event) {
      if($event.target.children.length > 250) {
        const refresh = document.querySelector('.refresh')
        refresh.click()
      }
      if(this.f) {
        this.f = false
        setTimeout(function() {
          if($event.target.scrollTop + $event.target.offsetHeight > sessionStorage.defaultLoad) {
            const waterfall = document.querySelector('.waterfall')
            const newNode = []
            for(let i = 0; i < this.loadNum; i++) {
              newNode[i] = document.querySelector('.waterfall-card').cloneNode(true)
              waterfall.appendChild(newNode[i])
            }
            const loadNode = {
              top: JSON.parse(sessionStorage.endWaterInfoArr),
              node: newNode
            }
            this.createWaterfall(this.num, loadNode)
            this.createWaterfall(this.num)
          }
          this.f = true
        }.bind(this), 2000)
      }
    },
    updateWindowSize() {
      const em = document.querySelector('.el-main')
      const eh = document.querySelector('.el-header')
      const wc = document.querySelector('.waterfall-container')
      const wh = document.querySelector('.w-h')
      const w = document.querySelector('.waterfall')
      em.style.width = eh.offsetWidth + 'px'
      wc.style.height = em.offsetHeight - 20 + 'px'
      w.style.maxHeight = wc.offsetHeight - wh.offsetHeight + 'px'
      this.createWaterfall(this.num)
    }
  },
  mounted() {
    this.updateWindowSize()
  }
}
</script>

<style lang="less" scoped>
  .waterfall-container {
    width: 100%;
  }
  .show-text {
    color: #333;
    font-size: 12px;
  }
  .show-num {
    margin: 5px 3px;
    padding: 2px 4px;
  }
  .waterfall {
    position: relative;
    overflow-y: scroll;
  }
  .img-box {
    width: 100%;
    height: 80%;
  }
  .waterfall-card {
    display: inline-block;
    padding: 5px;
    vertical-align: top;
    border: 5px solid #fff;
    box-shadow: 0 0 1px #aaa;
    box-sizing: border-box;
  }
  .img-info {
    margin: 10px 0;
  }
  .share {
    margin-right: 20px;
    font-size: 14px;
    color: #CCCCCC;
    cursor: pointer;
  }
  .like {
    color:  #ffff00;
    cursor: pointer;
  }
  .unlike {
    color: #aaffff;
    cursor: pointer;
  }
</style>
